<template>
  <view>
    <view @tap.stop="_show = !_show">
      <slot />
    </view>
    <su-popup :show="_show" :round="round" @close="_show = false">
      <view class="title">{{ title }}</view>
      <view :style="{ height: dHeight + 'rpx', borderRadius: round + 'px' }" style="overflow: hidden">
        <su-time-view
          :height="dHeight - 120"
          :model-value="_value"
          :model-str="_strvalue"
          :default-value="_value"
          :disabled-date="props.disabledDate"
          :format="props.format"
          :show-detail="props.showDetail"
          :show-suffix="props.showSuffix"
          :start="props.start"
          :end="props.end"
          :immediate-change="props.immediateChange"
          @update:model-value="_value = $event"
          @update:model-str="_strvalue = $event"
          @change="change"
        />
        <view class="ss-flex ss-row-center">
          <button class="confirm-btn" @tap.stop="confirm">{{ buttonText }}</button>
        </view>
      </view>
    </su-popup>
  </view>
</template>

<script setup>
/**
 * 日(弹层式)
 * @description法。
 */
import { computed, ref, watch, nextTick, watchEffect } from 'vue'
const emits = defineEmits(['update:modelValue', 'update:modelStr', 'update:show', 'confirm', 'change', 'cancel', 'close', 'open'])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  immediateChange: {
    type: Boolean,
    default: false
  },
  /**
	 * 这里是动态返回时间戳。这是一个标准的时间，不管showDetail是如何设置都将不影响这里的输出。
	 * 并且fomart不会影响这里的双向绑定。只会影响model-str
	 */
  modelValue: {
    type: [Number, String, Date],
    default: ''
  },
  /**
	 * 这里和modelValue不一样，它只代表格式化输出显示，因此这里可能并不是一个有效的时间值。
	 * 比如:format为"MM/DD",那这里就会显示12/10这样的时间格式，因此并不是一个正确的时间，
	 * 这里主要是为了方便表单上页面的显示控制输入。如果真要保存到数据库，你应该保存modelValue的值。
	 */
  modelStr: {
    type: [String],
    default: ''
  },
  defaultValue: {
    type: [Number, String, Date],
    default: ''
  },
  /**
	 * 禁用的部分日期，禁用的日期将不会被选中，就算滑到了该位置，也会回弹到之前的时间。
	 * 现在暂时只禁用到天，也就是一个时间到天这如果==下面的禁用日期，就会选不中。
	 */
  disabledDate: {
    type: Array,
    default: () => []
  },
  // 展示格式。最终影响到modelStr输出格式的内容。
  format: {
    type: String,
    default: 'YYYY/MM/DD'
  },
  // 需要展现的时间格式类型
  showDetail: {
    type: Object,
    default: () => {
      return {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      }
    }
  },
  // 日期的后缀，
  showSuffix: {
    type: Object,
    default: () => {
      return {
        year: '年',
        month: '月',
        day: '日',
        hour: '时',
        minute: '分',
        second: '秒'
      }
    }
  },
  start: {
    type: [Number, String, Date],
    default: '2008/01/01 00:00:00'
  },
  end: {
    type: [Number, String, Date],
    default: ''
  },
  height: {
    type: Number,
    default: 700
  },
  // color: {
  //   type: String,
  //   default: 'primary'
  // },
  // linear: {
  //   type: String,
  //   default: ''
  // },
  // linearDeep: {
  //   type: String,
  //   default: 'light'
  // },
  // btnRound: {
  //   type: Number,
  //   default: 3
  // },
  buttonText: {
    type: String,
    default: '确认选择'
  },
  round: {
    type: Number,
    default: 12
  },
  title: {
    type: String,
    default: '请选择时间'
  }
})

const _show = ref(props.show)
const isConfirm = ref(false) // 是否点了确认按钮。
const _value = ref(props.defaultValue)
const _strvalue = ref('')

function close() {
  if (!isConfirm.value) {
    emits('cancel')
    // 取消了，但没点确认，则要恢复默认值。
    _value.value = ''
    nextTick(() => {
      _value.value = props.modelValue ? props.modelValue : props.defaultValue
    })
  }
  emits('close')
  emits('update:show', false)
  _show.value = false
  isConfirm.value = false
}
function open() {
  emits('open')
}

watchEffect(() => {
  _show.value = props.show
})
watch(
  () => props.modelValue,
  () => {
    _value.value = props.modelValue
  },
  { deep: true }
)
function change(e) {
  emits('change', e)
}

function confirm() {
  emits('confirm', _value.value)
  emits('update:modelValue', _value.value)
  emits('update:modelStr', _strvalue.value)
  nextTick(() => {
    isConfirm.value = true
    _show.value = false
    // drawer.value?.close()
  })
}

const dHeight = computed(() => {
  return props.height + 80
})
</script>

<style scoped lang="scss">
.title{
	font-size: 30rpx;
	margin: 10rpx;
	margin-top: 25rpx;
	margin-left: 20rpx;
}
.confirm-btn {
	width: 710rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	border-radius: 40rpx;
	color: #fff;
}
</style>
